..<template>
  <div class="template">
    <!-- Tree筛选 -->
        <div id="CategoryTree" style="width: 180px">
            <el-input
                @clear="initWorkflowActReProcDef"
                placeholder="输入关键字进行过滤"
                clearable
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree"
                :data="dataCategory"
                :props="defaultCategoryProps"
                default-expand-all
                :filter-node-method="filterCategoryNode"
                ref="tree"
                show-checkbox
                node-key="categoryId"
                :check-strictly="true"
                @check-change="handleCheckChange"
                @node-click="nodeClick">
                <!-- 处理菜单内容过长 -->
                <span class="custom-tree-node" slot-scope="{ node }">
                    <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                        <span > {{ node.label | ellipsis(8) }} </span>
                    </el-tooltip>
                </span>
            </el-tree>
        </div>
    <!-- 筛选 -->
    <div id="pageList" style="margin-left: 20px;">
        <div class="addActBtCategory">
            <div style="float: left;display: flex;">
                <el-input style="width: 50%"
                @clear="initWorkflowActReProcDef"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入流程名称"
                class="initWorkflowActReProcDef"
                v-model="processDefinitionPage.processDefinitionName"
                @keydown.enter.native="initWorkflowActReProcDefQuery">
              </el-input>
              <el-input style="margin-left: 8px;width: 50%"
                @clear="initWorkflowActReProcDef"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入流程关键字"
                class="initWorkflowActReProcDef"
                v-model="processDefinitionPage.processDefinitionKey"
                @keydown.enter.native="initWorkflowActReProcDefQuery">
              </el-input>
              <el-input style="margin-left: 8px;width: 50%"
                @clear="initWorkflowActReProcDef"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入流程版本"
                class="initWorkflowActReProcDef"
                v-model="processDefinitionPage.proDefVersion"
                @keydown.enter.native="initWorkflowActReProcDefQuery">
              </el-input>
              <el-select style="margin-left: 8px;width: 50%" v-model="processDefinitionPage.suspended" @clear="initWorkflowActReProcDef" clearable placeholder="请选择流程状态">
                  <el-option
                  v-for="item in suspendeds"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
              <el-button style="margin-left: 8px;" icon="el-icon-search"
                        type="info" @click="initWorkflowActReProcDefQuery">查询</el-button>
            </div>
            <div style="display: flex;justify-content: flex-end">
                <el-button
                        type="primary"
                        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                </el-button>
            </div>
        </div>

        <!-- 列表 -->
        <div>
            <el-table
                :data="ProcessDefinitionList"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
                      <el-table-column
                              label="流程编码"
                              width="250">
                          <template slot-scope="scope">
                              <el-popover trigger="hover" placement="top">
                                  <p>bpmn类别: {{ scope.row.category }}</p>
                                  <p>流程类别: {{ scope.row.categoryName }}</p>
                                  <p>部署编号: {{ scope.row.deploymentId }}</p>
                                  <p>描述信息: {{ scope.row.description }}</p>
                                  <p>资源名称: {{ scope.row.diagramResourceName }}</p>
                                  <p>流程编号: {{ scope.row.processDefinitionId }}</p>
                                  <p>流程名称: {{ scope.row.processDefinitionName }}</p>
                                  <p>xml名称: {{ scope.row.resourceName }}</p>
                                  <p>租户编号: {{ scope.row.tenantId }}</p>
                                  <p>流程版本: {{ scope.row.version }}</p>
                                  <p>流程状态:
                                      <el-tag type="success" v-if="scope.row.suspended==1">激活状态</el-tag>
                                      <el-tag type="danger" v-else>挂起状态</el-tag>
                                  </p>
                                  <div slot="reference" class="name-wrapper">
                                      <el-tag size="medium">{{ scope.row.processDefinitionKey }}</el-tag>
                                  </div>
                              </el-popover>
                          </template>
                      </el-table-column>
                      <el-table-column
                              label="流程类别"
                              width="150">
                          <template slot-scope="scope">
                              <span>{{ scope.row.categoryName }}</span>
                          </template>
                      </el-table-column>
                      <el-table-column
                              label="流程名称"
                              width="250">
                          <template slot-scope="scope">
                              <span>{{ scope.row.processDefinitionName }}</span>
                          </template>
                      </el-table-column>
                      <el-table-column
                              label="流程版本"
                              width="150">
                          <template slot-scope="scope">
                              <el-tag type="success"><span>V{{ scope.row.version }}</span></el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column
                              label="流程状态" width="100">
                          <template slot-scope="scope">
                              <el-tag type="success" v-if="scope.row.suspended==1">激活状态</el-tag>
                              <el-tag type="danger" v-else>挂起状态</el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column label="操作" width="500">
                          <template slot-scope="scope">
                              <el-button
                                      type="text"
                                      title="流程图预览"
                                      @click="ProcessModelSvgImage(scope.row)"><i class="el-icon-edit"></i>预览</el-button>
                              <el-button
                                      type="text"
                                      title="填写表单并发起流程"
                                      @click="insertGeneratorFormContentAndStartProcess(scope.row)"><i class="el-icon-s-promotion"></i>启动审批</el-button>
                          </template>
                      </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                  <el-pagination
                          background
                          @current-change="currentChange"
                          @size-change="sizeChange"
                          layout="sizes, prev, pager, next, jumper, ->, total, slot"
                          :total="total">
                  </el-pagination>
              </div>
        </div>
    </div>
    <!-- 表单页面 -->
    <div>
      <el-drawer
        :visible.sync="drawer"
        ref="drawer"
        :show-close="false"
        :before-close="handleClose"
        >
        <div slot="title" class="demo-drawer__header">
              <span>填写表单</span>
        </div>
        <div class="demo-drawer__content">
            <!-- 表单页面-->
           <div v-if="flag">
               <parser :form-conf="formContent" ref="parser"></parser>
           </div>
           <div class="DepartmentGroupViewUserList">
             <div style="margin-left: -35px;font-size: 16px;">
              审批人员：<el-select v-model="assignee" placeholder="请选择审批人员" style="width: 375px;" clearable multiple>
                 <el-option-group
                   v-for="group in DepartmentGroupViewUserList"
                   :key="group.institutionsId"
                   :label="group.institutionsName">
                   <el-option
                     v-for="item in group.children"
                     :key="item.userId"
                     :label="item.realName"
                     :value="item.realName">
                   </el-option>
                 </el-option-group>
               </el-select>
              </div>
           </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </el-drawer>
    </div>

  </div>
</template>

<script>
import parser from 'form-gen-parser'
export default {
 inject:['reload'],
 name:"officeInitiateProcess",
 components: { parser },
 data(){
   return{
     formContent:{},
     drawer:false,
     loading: false,
     filterText: '',
     // 查询目录属性设置
     defaultCategoryProps:{
         children: 'children',
         label: 'categoryName'
     },
     // 初始化目录
     dataCategory:[],
    loading: false,
     // 封装查询条件
    processDefinitionPage:{
      proDefCategory:'',
      processDefinitionName:'',
      processDefinitionKey:'',
      proDefVersion:'',
      whetherFilter: true,
      suspended:0,
      pageNum: 1,
      pageSize: 20
    },
    suspendeds:[{
        value: 0,
        label: '请选择'
        },{
        value: 1,
        label: '激活状态'
        },{
        value: 2,
        label: '挂起状态'
    }],
    // 初始化列表
    ProcessDefinitionList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[],
    flag:false,
    DepartmentGroupViewUserList:[],
    tableContent:{
      formContent:{},
      tableName:'',
      processDefinitionId:'',
      assignee:'',
      notation:''
    },
    assignee:''
   }
  },
  mounted(){
    // 初始化列表
    this.initWorkflowActReProcDefQuery();
    this.ProcessModelCategoryTreeSelects();
  },
 methods:{
   // 填写表单发起流程
   insertGeneratorFormContentAndStartProcess(data){
     // 部署编号查询表单内容（表名、表单内容）、流程定义编号
     this.getRequest("/activity/ActReProcDef/query/FormContentByDeploymentId/"+data.deploymentId).then(resp => {
         if (resp&&resp.data!=null) {
             this.formContent = JSON.parse(resp.data.formContent);
             if(Object.keys(this.formContent).length!=0){
                this.flag = true;
                this.tableContent.tableName = resp.data.tableName;
                this.tableContent.processDefinitionId = data.processDefinitionId;
             }
         }
     });
     this.getRequest("/account/BtAccountUser/select/DepartmentGroupViewUserList").then(resp => {
         if (resp) {
            this.DepartmentGroupViewUserList = resp.data;
         }
     });
     this.drawer = true;
   },
   // 关闭表单页面
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          // 提交表单内容（校验）
          this.$refs.parser.submitForm();
          this.tableContent.formContent = this.$refs.parser.formData;
          this.tableContent.assignee = this.assignee.toString();
          this.postRequest("/activity/InitiateProcess/insert/GeneratorFormContentAndStartProcess",this.tableContent).then(resp => {
              if (resp) {
                  this.loading = true;
                  this.timer = setTimeout(() => {
                    done();
                    // 动画关闭需要一定的时间
                    setTimeout(() => {
                      this.loading = false;
                      this.reload();
                    }, 400);
                  }, 2000);
              }
          });
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.drawer = false;
      this.reload();
      clearTimeout(this.timer);
    },
   // 预览
   ProcessModelSvgImage(data){
        this.$router.push({
            path: '/viewProcess',
            // 参数传递
            query: {
                processDefinitionId:data.processDefinitionId,
                viewPage:'officeInitiateProcess'
            }
        })
   },
   // 查询框清空事件
   initWorkflowActReProcDef(){
     this.resetCondition();
   },
   // 重置查询条件
    resetCondition(){
        this.$refs.tree.setCheckedNodes([]);
        this.filterText = '';
        this.processDefinitionPage.proDefCategory = '';
        this.processDefinitionPage.processDefinitionName = '';
        this.processDefinitionPage.processDefinitionKey = '';
        this.processDefinitionPage.proDefVersion = '';
        this.processDefinitionPage.suspended = 0;
        this.initWorkflowActReProcDefQuery();
    },
   // 初始化列表
   initWorkflowActReProcDefQuery(){
      this.loading = true;
        this.postRequest("/activity/ActReProcDef/query/ProcessDefinitionPageList",this.processDefinitionPage).then(resp => {
        this.loading = false;
        if (resp) {
          this.ProcessDefinitionList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 菜单目录选择
    handleCheckChange(data, checked, node){
        if(checked == true){
            this.filterText = data.categoryName;
            this.processDefinitionPage.proDefCategory = data.categoryId;
            this.$refs.tree.setCheckedNodes([data]);
        }
    },
    nodeClick(data,checked,node){
        this.filterText = data.categoryName;
        this.processDefinitionPage.proDefCategory = data.categoryId;
        this.$refs.tree.setCheckedNodes([data]);
    },
    // 目录节点过滤
    filterCategoryNode(value,dataCategory){
        if (!value) return true;
        return dataCategory.categoryName.indexOf(value) !== -1;
    },
    // 获取目录
    ProcessModelCategoryTreeSelects(){
        this.getRequest("/activity/ActBtCategory/query/ProcessModelCategoryTree").then(resp => {
            if (resp) {
                this.dataCategory = resp.data;
            }
        });
    },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.processDefinitionPage.pageSize = currentSize;
    this.initWorkflowActReProcDefQuery();
  },
  currentChange(currentPage) {
    this.processDefinitionPage.pageNum = currentPage;
    this.initWorkflowActReProcDefQuery();
  }
 }
}
</script>

<style scoped>
    .addActBtCategory{
        margin-bottom: 10px;
    }
    #CategoryTree{
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 730px;
    }
    .filter-tree{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 600px;
        margin:  10px;
    }
     #CategoryTree #pageList{
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
    .template{
        display: flex;
    }
    .demo-drawer__header {
/*      background: #4ab26c;
      align-items: center;
      color: #fff;
      display: flex;
      padding: 15px 10px; */
    }
    .demo-drawer__content {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0 40px;
    }
    .demo-drawer__footer{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background-color: white;
    }
    .DepartmentGroupViewUserList{
      width: 100%;
      position: relative;
      border-top: 1px solid #e8e8e8;
     padding: 10px 16px;
     text-align: center;
    }
</style>
